<template>
   <div class="ImageText">
      <div class="text" v-for="(v, index) in arr" :key="index" @click="fun(v.proid)">
         <img :src="v.img1" alt="">
         <p class="one">{{ v.proname }}</p>
         <p class="two">￥{{ v.originprice }}</p>


      </div>
   </div>
</template>

<script>
//   import service from "../../../../src/utils/service";
import service from '@/utils/service'
export default {
   data() {
      return {
         arr: [],
      }
   },
   mounted() {
      service({
         url: "http://118.178.238.19:3001/api/pro/recommendlist",
         method: "get",
         params: {
            limitNum: 25
         }
      }).then(res => {
         this.arr = res.data.data

      })
   },
   methods: {
      fun(myid) {
         this.$router.push({ name: "xqy", params: { mr: myid } });
      }
   }
}
</script>

<style scoped>
.ImageText {
   width: 95%;
   display: flex;
   margin-left: .5rem;
   border-radius: 1rem;
   flex-wrap: wrap;
   background-color: #f6f6f6;
   justify-content: space-between;
}

.ImageText .text {
   border-radius: 1rem;
   width: 47%;

   border-radius: 1rem;
   background-color: white;
   margin-bottom: 1rem;
}

.ImageText .text img {
   width: 176.49px;
   height: 176.49px;
   background-color: #c82519;
   border-radius: 1rem 1rem 0 0;
}

.ImageText .text .one {
   font-size: 12px;
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.ImageText .text .two {
   color: red;
}
</style>